<!DOCTYPE html><html>
<head>
    <title>Form</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <link href="/jscss/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <h3>以下所有效果，均使用简单CSS实现，没有用任何JS代码，为精简开发铺路。</h3>
        <form>
            <div class="form-group">
                <label>复选框</label>
                <div>
                    <label class="formi"><input type="checkbox"/><i></i>爱迪生</label>
                    <label class="formi"><input type="checkbox" checked="checked"/><i></i>特斯拉</label>
                    <label class="formi"><input type="checkbox" disabled/><i></i>收银台</label>
                    <label><input type="checkbox"/>默认效果</label>
                    <label><input type="checkbox"/>南飞雁</label>
                </div>
            </div>
            <div class="form-group">
                <label>单选框</label>
                <div>
                    <label class="formi"><input type="radio" name="xxx"/><i></i>爱迪生</label>
                    <label class="formi"><input type="radio" name="xxx"/><i></i>天鹅绒</label>
                    <label><input type="radio" name="xxx"/>默认效果</label>
                    <label><input type="radio" name="xxx"/>南飞雁</label>
                </div>
            </div>
            <div class="form-group">
                <label>短文本框</label>
                <div>
                    <input type="text" placeholder="http://" style="width:10em;"/>
                </div>
            </div>
            <div class="form-group">
                <label>文本框</label>
                <div>
                    <input type="text" placeholder="ciy.cn">
                </div>
            </div>
            <div class="form-group">
                <label></label>
                <div>
                    <input type="text" style="width:20em;"> 无标题
                </div>
            </div>
            <div class="form-group">
                <label>禁用</label>
                <div>
                    <input type="text" disabled placeholder="@ciy.cn" style="width:10em;">
                </div>
            </div>
            <div class="form-group">
                <div>
                    <input type="text" placeholder="去掉label标签，通屏效果">
                </div>
            </div>
            <div class="form-group">
                <label style="width:5em;">短标题</label>
                <div>
                    <input type="text">
                </div>
            </div>
            <div class="form-group">
                <label style="width:10em;">长标题</label>
                <div>
                    <input type="text">
                </div>
            </div>
            <div class="form-group">
                <label>右侧按钮框</label>
                <div>
                    <input type="text" placeholder="主flex:12，按比例等分">
                </div>
                <div style="flex:3;">
                    <button type="submit" class="btn">验证码</button>
                </div>
            </div>
            <div class="form-group">
                <label>重点输入框</label>
                <div>
                    <input type="text" class="imp">
                </div>
            </div>
            <div class="form-group">
                <label>下拉列表框</label>
                <div>
                    <select style="width:7em;">
                        <option value="1">上海</option>
                        <option value="2" disabled>杭州</option>
                        <option value="3">武汉</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label>开关按钮</label>
                <div>
                    <label class="formswitch"><input type="checkbox" name="xxx1"/><y>ON</y><n>OFF</n><i></i></label>
                    <label class="formswitch"><input type="checkbox" name="xxx2" checked='checked'/><y>开</y><n>关</n><i></i></label>
                    <label class="formswitch"><input type="checkbox" name="xxx3"/><y>启用</y><n>禁用</n><i></i></label>
                    <label class="formswitch char4"><input type="checkbox" name="xxx3"/><y>四个汉字</y><n>开关加宽</n><i></i></label>
                </div>
            </div>
            <div class="form-group">
                <label>连体文本框</label>
                <div>￥ <input type="text" style="width:4em;"/> 元</div>
            </div>
            <div class="form-group">
                <label>区间框</label>
                <div><input type="text" style="width:6em;"> - <input type="text" style="width:6em;"></div>
            </div>
            <div class="form-group">
                <label>多行文本框</label>
                <div>
                    <textarea style="height:7em;"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div style="text-align:center;">
                    <button type="submit" class="btn">Send Button</button>
                </div>
            </div>
        </form>
    </div>
</body></html>